<template>
  <div class="big">
    <div class="middle">
      <img :src="getDetailShopList[0].img" alt />
      <div class="small">
        <div class="little">
          <i>￥</i>
          <span>{{getDetailShopList[0].price.split('.')[0]}}</span>.
          <em>{{getDetailShopList[0].price.split('.')[1]}}</em>
        </div>
        <p>{{getDetailShopList[0].title}}</p>
      </div>
    </div>
    <div class="bottom">
      <el-button type="danger" round @click="addShopCar">加入购物车</el-button>
    </div>
    <div class="top" @click="back">
      <i class="el-icon-arrow-left"></i>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";
export default {
  name: "Detail",
  computed: {
    ...mapGetters(["getDetailShopList"])
  },
  methods: {
    ...mapActions(["getShopById"]),
    back() {
      this.$router.back();
    },
    addShopCar() {
        axios.post('/login/addShopCar',{
            id:this.$route.query.id
        }).then(res=>{
          this.$message({
                message: res.data,
                center: true,
                showClose: true,
              });
        })
        .catch(err=>{
          console.log(err);
        })
    }
  },
  mounted() {
    const id = this.$route.query.id;
    this.getShopById(id);
    if (document.cookie == "") {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "登录失效请重新登录",
        center: true,
        showClose: true,
        type: "warning"
      });
    }
  },
  destroyed() {
    if (document.cookie == "") {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "登录失效请重新登录",
        center: true,
        showClose: true,
        type: "warning"
      });
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
a {
  color: black;
  text-decoration: none;
}
li {
  list-style: none;
}
.big {
  position: relative;
  height: 177.8666vw !important;
  background-color: #f6f6f6;
}
.middle {
  background-color: #fff;
  border-radius: 0 0 2.6666vw 2.6666vw;
}
img {
  width: 100vw;
}
.small {
  padding: 3.2vw 4.8vw;
}
.little {
  color: red;
}
i {
  font-style: normal;
}
span {
  font-size: 6.9333vw;
}
em {
  font-size: 4.8vw;
  font-style: normal;
}
p {
  margin-top: 3.2vw;
  font-size: 4.2666vw;
  font-weight: bold;
}
.bottom {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 13.3333vw;
  background-color: #fff;
}
.el-button {
  position: absolute;
  right: 1.3333vw;
}
.top {
  position: absolute;
  top: 1.3333vw;
  left: 1.3333vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8vw;
  height: 8vw;
  background-color: #666666;
  color: #fff;
  border-radius: 50%;
}
</style>